<template>
  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto">
    <div class="flex flex-col gap-2 pb-6 border-b border-slate-200 mb-4">
      <h2 class="text-xl font-semibold text-slate-700 m-0">创作内容</h2>
      <p class="text-sm text-slate-500 leading-relaxed m-0">
        写下你的文章内容。你可以使用Markdown格式来美化你的文章。
      </p>
    </div>
    
    <div class="flex flex-col gap-6 bg-white rounded-lg shadow-sm p-6 border border-slate-200">
      <!-- 标题编辑器 -->
      <TitleEditor 
        :placeholder="'输入文章标题...'"
        :show-tips="true"
        :show-slug="true"
        :slug-prefix="baseUrl + 'articles/'"
      />
      
      <!-- 内容编辑器 -->
      <ContentEditor 
        :simple-mode="true"
        :show-word-count="true"
      />
      
      <!-- 摘要输入（可选） -->
      <div class="flex flex-col gap-2">
        <label for="excerpt" class="text-sm font-medium text-slate-700">
          摘要
          <span class="text-slate-400 text-xs ml-1">(可选，不填将自动生成)</span>
        </label>
        <textarea
          id="excerpt"
          v-model="editorStore.excerpt"
          @input="editorStore.setExcerpt($event.target.value)"
          rows="3"
          class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 resize-none"
          placeholder="为文章添加一个简短的摘要描述，如果不填写，系统将自动从文章内容中生成..."
        />
        <p class="text-xs text-slate-500">
          摘要将显示在文章列表和文章详情页，帮助读者快速了解文章内容。
        </p>
      </div>
    </div>
    
    <!-- 步骤导航 -->
    <div class="flex justify-end mt-6">
      <button 
        class="flex items-center gap-2 px-5 py-2.5 rounded-md text-sm font-medium bg-slate-600 text-white border-none cursor-pointer transition-colors hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed"
        @click="handleNext"
        :disabled="!canProceed"
      >
        下一步
        <ChevronRightIcon class="w-5 h-5" />
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useArticleEditorStore } from '@/stores/articleEditor';
import TitleEditor from '../Components/TitleEditor.vue';
import ContentEditor from '../Components/ContentEditor.vue';
import { useToast } from '@/Composables/useToast';
import { ChevronRightIcon } from '@heroicons/vue/20/solid';

const props = defineProps({
  baseUrl: {
    type: String,
    default: 'https://yourblog.com/'
  }
});

const emit = defineEmits(['next']);
const editorStore = useArticleEditorStore();
const toast = useToast();

// 计算属性
const canProceed = computed(() => {
  return editorStore.title.trim().length > 0 && 
         editorStore.content.trim().length > 0;
});

// 方法
const handleNext = () => {
  if (!canProceed.value) {
    toast('请填写文章标题和内容', 'error');
    return;
  }
  
  emit('next');
};
</script> 